const CompressionWebpackPlugin = require('compression-webpack-plugin')
const cdnDependencies = require('./dependencies-cdn')

const TerserPlugin = require('terser-webpack-plugin')
// 拼接路径
const resolve = dir => require('path').join(__dirname, dir)

// 增加环境变量
process.env.VUE_APP_VERSION = require('./package.json').version
// 构建时间 | 服务器时间转为中国时间
// Unix 时间戳 (毫秒)
let time = require('dayjs')()
time = time.subtract(time.utcOffset(), 'minute').add(480, 'minute')
process.env.VUE_APP_BUILD_TIME = `${time.valueOf()}|number`

// 设置不参与构建的库
let externals = {}
cdnDependencies.forEach(pkg => {
    externals[pkg.name] = pkg.library
})

// 引入文件的 cdn 链接
const cdn = {
    css: cdnDependencies.map(e => e.css).filter(e => e),
    js: cdnDependencies.map(e => e.js).filter(e => e)
}
module.exports = {
    // 根据你的实际情况更改这里
    publicPath: process.env.VUE_APP_PUBLIC_PATH || '/',
    lintOnSave: true,
    parallel: require('os').cpus().length > 1,
    css: {
        loaderOptions: {
            // 设置 scss 公用变量文件
            sass: {
                prependData: "@import '~@/assets/style/public.scss';"
            }
        },
        sourceMap: false
    },
    configureWebpack: config => {
        const configNew = {}
        if (process.env.NODE_ENV === 'production') {
            configNew.externals = externals
            configNew.plugins = [
                // gzip
                new CompressionWebpackPlugin({
                    filename: '[path].gz[query]',
                    test: new RegExp('\\.(' + ['js', 'css'].join('|') + ')$'),
                    threshold: 10240,
                    minRatio: 0.8,
                    deleteOriginalAssets: false
                })
            ]
            const plugins = []
            plugins.push(
                new TerserPlugin({
                    cache: true, // 是否缓存
                    sourceMap: false,
                    terserOptions: {
                        warnings: false,
                        compress: {
                            drop_console: true,
                            drop_debugger: false,
                            pure_funcs: ['console.log'] //移除console
                        }
                    }
                })
            )
            config.plugins = [...config.plugins, ...plugins]
        }
        if (process.env.NODE_ENV === 'development') {
            // 关闭 host check，方便使用 ngrok 之类的内网转发工具
            configNew.devServer = {
                disableHostCheck: true
            }
        }
        return configNew
    },
    // 默认设置: https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-service/lib/config/base.js
    chainWebpack: config => {
        // config.plugins.delete('prefetch')
        // // 移除 preload 插件
        // config.plugins.delete('preload')
        // // 压缩代码
        // config.optimization.minimize(true)
        // // 分割代码
        // config.optimization.splitChunks({
        //     chunks: 'all'
        // })
        /**
         * 添加 CDN 参数到 htmlWebpackPlugin 配置中
         */
        config.optimization.runtimeChunk('single')
        config.plugin('html').tap(args => {
            if (process.env.NODE_ENV === 'production') {
                args[0].cdn = cdn
            } else {
                args[0].cdn = []
            }
            return args
        })
        /**
         * 删除懒加载模块的 prefetch preload，降低带宽压力
         * https://cli.vuejs.org/zh/guide/html-and-static-assets.html#prefetch
         * https://cli.vuejs.org/zh/guide/html-and-static-assets.html#preload
         * 而且预渲染时生成的 prefetch 标签是 modern 版本的，低版本浏览器是不需要的
         */
        config.plugins.delete('prefetch').delete('preload')
        // 解决 cli3 热更新失效 https://github.com/vuejs/vue-cli/issues/1559
        config.resolve.symlinks(true)
        config
            // 开发环境
            .when(
                process.env.NODE_ENV === 'development',
                // sourcemap不包含列信息
                config => config.devtool('cheap-source-map')
            )
        // 预览环境构建 vue-loader 添加 filename
        // .when(process.env.VUE_APP_SCOURCE_LINK === 'TRUE', config =>
        //     VueFilenameInjector(config, {
        //         propName: process.env.VUE_APP_SOURCE_VIEWER_PROP_NAME
        //     })
        // )
        // 压缩图片
        // 需要 npm i -D image-webpack-loader
        config.module
            .rule('images')
            .use('image-webpack-loader')
            .loader('image-webpack-loader')
            .options({
                mozjpeg: { progressive: true, quality: 65 },
                optipng: { enabled: false },
                pngquant: { quality: [0.65, 0.9], speed: 4 },
                gifsicle: { interlaced: false }
                // webp: { quality: 75 }
            })
        // markdown
        config.module
            .rule('md')
            .test(/\.md$/)
            .use('text-loader')
            .loader('text-loader')
            .end()
        // svg
        const svgRule = config.module.rule('svg')
        svgRule.uses.clear()
        svgRule.include
            .add(resolve('src/assets/svg-icons/icons'))
            .end()
            .use('svg-sprite-loader')
            .loader('svg-sprite-loader')
            .options({
                symbolId: 'icon-[name]'
            })
            .end()
        // image exclude
        const imagesRule = config.module.rule('images')
        imagesRule
            .test(/\.(png|jpe?g|gif|webp|svg)(\?.*)?$/)
            .exclude.add(resolve('src/assets/svg-icons/icons'))
            .end()
        // 重新设置 alias
        config.resolve.alias.set('@api', resolve('src/api')).end()
        // 分析工具
        if (process.env.npm_config_report) {
            config
                .plugin('webpack-bundle-analyzer')
                .use(require('webpack-bundle-analyzer').BundleAnalyzerPlugin)
        }
    },
    // 不输出 map 文件
    productionSourceMap: false,
    // i18n
    pluginOptions: {
        i18n: {
            locale: 'zh-chs',
            fallbackLocale: 'en',
            localeDir: 'locales',
            enableInSFC: true
        }
    }
}
